<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #imgDiv{
            display: none;
        }
    </style>

    <script>
        var divObj ;
        //window.onload 等待文档加载完毕后，再执行
        window.onload = function () {
            divObj = document.getElementById("imgDiv");
            //得到divObj标签对象中，img子元素集合，返回数组
            var imgArray = divObj.getElementsByTagName("img");
            for(var i=0;i<imgArray.length;i++){
                imgArray[i].onclick = function (){
                    changeImg(this);
                }
            }
        }
        function showDiv(){
            divObj.style.display = "block";
        }

        function changeImg(imgObj){
            document.getElementById("faceImg").src = imgObj.src;
            divObj.style.display = "none";
        }

    </script>
</head>
<body>
    <img src="photo/b1.jpg" id="faceImg"><br>
    <input type="button" value="选择头像" onclick="showDiv()"><br>
    <div id="imgDiv">
        <img src="photo/b2.jpg">
        <img src="photo/b3.jpg">
        <img src="photo/b4.jpg"><br>
        <img src="photo/g1.jpg">
        <img src="photo/g2.jpg">
        <img src="photo/g3.jpg">
    </div>



</body>
</html>